<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
            #nav ul{list-style:none;}      /*去除小点*/
            #nav li{                       /*li的常态*/
                text-align:center;
                width:120px;height:40px;
                border:0px solid red;
                float:left;
                line-height:40px;
                position:relative;
                padding:1px;
                
            }
            #nav a{
                display:block;
                width:120px;height:40px;
                text-decoration:none;
                background-color:deeppink;
                color:white;
                font-weight:bold;
                border-radius:3px;
            }
            #nav a:hover{
                background-color:greenyellow;
                color:red;
            }
            #nav>ul>li ul{display:none;} /*所有菜单隐藏*/
            
            #nav>ul>li:hover>ul{      /*二级菜单显示*/
                display:block;
                margin-left:-41px;
            }
            #nav li.m2:hover>ul{     /*三级菜单显示*/
                display:block;
                position:absolute;
                left:80px;top:0px;
            }
        </style>
    </head>
    <body>
            
            <div id="nav">
                <ul>
                      <li><a>电影</a>
                                <ul>
                                        <li><a href=''>动作片</a></li>
                                        <li><a href=''>喜剧片</a></li>
                                        <li><a href=''>科幻片</a></li>
                                        <li class='m2'><a>爱情片</a>
                                                    <ul>
                                                            <li><a href=''>乡村爱情</a></li>
                                                            <li><a href=''>都市爱情</a></li>
                                                            <li><a href=''>校园爱情</a></li>
                                                            <li><a href=''>荒野爱情</a></li>
                                                            <li><a href=''>柏拉式的爱情</a></li>
                                                    </ul>
                                        </li>
                                        
                                </ul>
                      </li>
                                
                      <li><a href="">电视剧</a></li>
                      <li><a href="">动画</a></li>
                      <li><a href="">综艺</a></li>
                </ul>
            </div>
            
    </body>
</html>